<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chrome驱动下载列表</title>
    <!-- 引入Vue.js -->
   <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
<!--    底层就是Javascript

        Js 比较麻烦 -》 Jquery 第一个框架 封装了很多JS的API
        Jq  直接操作DOM树 不符合优雅的编程 还有影响性能
        Vue
         vue框架 方便操作页面 更新页面 渲染数据
            对某一个根节点 进行控制   id="app"

   -->
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        table {
            border-collapse: collapse;
            width: 100%;
            margin-top: 20px;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
        tr:nth-child(even) {
            background-color: #f9f9f9;
        }
        .status-ok {
            color: green;
        }
        .download-btn {
            background-color: #4CAF50;
            color: white;
            padding: 6px 12px;
            text-decoration: none;
            border-radius: 4px;
        }
    </style>
</head>
<body>
    <div id="app">
<!--        {{  }}  插值表达式  引用变量 将Script 中 Vue对象内定义的变量直接引用到页面渲染 -->
        <h1>Chrome测试版驱动下载列表 (版本: {{ chromeVersion }})</h1>

        <div>
            <label>筛选平台：</label>
            <select v-model="selectedPlatform">
                <option value="">全部</option>
                <option v-for="platform in platforms" :value="platform">{{ platform }}</option>
            </select>
        </div>

        <table>
            <thead>
                <tr>
                    <th>类型</th>
                    <th>平台</th>
                    <th>下载链接</th>
                    <th>状态</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
<!--            定义了一行模板 循环filteredItems 生成对于的行数页面元素 -->
                <tr v-for="item in filteredItems" :class="'status-' + item.status">
                    <td><code>{{ item.type }}</code></td>
                    <td><code>{{ item.platform }}</code></td>
                    <td><code>{{ item.url }}</code></td>
                    <td><code>{{ item.statusCode }}</code></td>
                    <td>
                        <a :href="item.url" class="download-btn" download>下载</a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

    <script>
        new Vue({
            el: '#app',
            // 元数据区 定义了这个vue对象中变量
            data: {
                chromeVersion: '135.0.7049.42',
                selectedPlatform: '',
                items: [
                    { type: 'chrome', platform: 'linux64', url: 'https://storage.googleapis.com/chrome-for-testing-public/135.0.7049.42/linux64/chrome-linux64.zip', status: 'ok', statusCode: '200' },
                    { type: 'chrome', platform: 'mac-arm64', url: 'https://storage.googleapis.com/chrome-for-testing-public/135.0.7049.42/mac-arm64/chrome-mac-arm64.zip', status: 'ok', statusCode: '200' },
                    { type: 'chrome', platform: 'mac-x64', url: 'https://storage.googleapis.com/chrome-for-testing-public/135.0.7049.42/mac-x64/chrome-mac-x64.zip', status: 'ok', statusCode: '200' },
                    { type: 'chrome', platform: 'win32', url: 'https://storage.googleapis.com/chrome-for-testing-public/135.0.7049.42/win32/chrome-win32.zip', status: 'ok', statusCode: '200' },
                    { type: 'chrome', platform: 'win64', url: 'https://storage.googleapis.com/chrome-for-testing-public/135.0.7049.42/win64/chrome-win64.zip', status: 'ok', statusCode: '200' },
                    { type: 'chromedriver', platform: 'linux64', url: 'https://storage.googleapis.com/chrome-for-testing-public/135.0.7049.42/linux64/chromedriver-linux64.zip', status: 'ok', statusCode: '200' },
                    { type: 'chromedriver', platform: 'mac-arm64', url: 'https://storage.googleapis.com/chrome-for-testing-public/135.0.7049.42/mac-arm64/chromedriver-mac-arm64.zip', status: 'ok', statusCode: '200' },
                    { type: 'chromedriver', platform: 'mac-x64', url: 'https://storage.googleapis.com/chrome-for-testing-public/135.0.7049.42/mac-x64/chromedriver-mac-x64.zip', status: 'ok', statusCode: '200' },
                    { type: 'chromedriver', platform: 'win32', url: 'https://storage.googleapis.com/chrome-for-testing-public/135.0.7049.42/win32/chromedriver-win32.zip', status: 'ok', statusCode: '200' },
                    { type: 'chromedriver', platform: 'win64', url: 'https://storage.googleapis.com/chrome-for-testing-public/135.0.7049.42/win64/chromedriver-win64.zip', status: 'ok', statusCode: '200' },
                    { type: 'chrome-headless-shell', platform: 'linux64', url: 'https://storage.googleapis.com/chrome-for-testing-public/135.0.7049.42/linux64/chrome-headless-shell-linux64.zip', status: 'ok', statusCode: '200' },
                    { type: 'chrome-headless-shell', platform: 'mac-arm64', url: 'https://storage.googleapis.com/chrome-for-testing-public/135.0.7049.42/mac-arm64/chrome-headless-shell-mac-arm64.zip', status: 'ok', statusCode: '200' },
                    { type: 'chrome-headless-shell', platform: 'mac-x64', url: 'https://storage.googleapis.com/chrome-for-testing-public/135.0.7049.42/mac-x64/chrome-headless-shell-mac-x64.zip', status: 'ok', statusCode: '200' },
                    { type: 'chrome-headless-shell', platform: 'win32', url: 'https://storage.googleapis.com/chrome-for-testing-public/135.0.7049.42/win32/chrome-headless-shell-win32.zip', status: 'ok', statusCode: '200' },
                    { type: 'chrome-headless-shell', platform: 'win64', url: 'https://storage.googleapis.com/chrome-for-testing-public/135.0.7049.42/win64/chrome-headless-shell-win64.zip', status: 'ok', statusCode: '200' }
                ]
            },
            computed: {
                platforms() {
                    return [...new Set(this.items.map(item => item.platform))];
                },
                filteredItems() {
                    if (!this.selectedPlatform) {
                        return this.items;
                    }
                    return this.items.filter(item => item.platform === this.selectedPlatform);
                }
            }
        });
    </script>
</body>
</html>